<template>
  <div class="settle-in-main">
    <honexun-header>
      <honexun-header-left v-show="showArea === 2"
                           :showLogin="true"></honexun-header-left>
      <honexun-header-right v-show="showArea === 1"></honexun-header-right>
    </honexun-header>
    <!--banner部分-->
    <div class="settle-in-banner">
      <div class="settle-in-banner-background" :class="className">
        <div class="background-box">
          <div class="banner-title">{{txt1}}</div>
          <div class="banner-title1">{{txt2}}</div>
          <div class="banner-options"
               @click="immediatelySettleIn">立即入驻</div>
        </div>
      </div>
      <div class="banner-content">
        <div class="banner-content-title">入驻流程</div>
        <div class="progress-content">
          <div class="each-progress"
               v-for="(item, i) in progressList"
               :key="'progressList' + i">
            <div class="left-index">
              <span>{{i + 1}}</span>
            </div>
            <div class="right-content">
              <div class="right-title">{{item.title}}</div>
              <div class="right-detail">{{item.detail}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--内容区域-->
    <router-view />

    <!-- <div class="footer"></div> -->
  </div>
</template>

<script>
import honexunHeader from '@/layout/header_A';
import honexunHeaderRight from '@/layout/header_right_A';
import honexunHeaderLeft from '@/layout/header_left_A';
export default {
  components: {
    honexunHeader,
    honexunHeaderRight,
    honexunHeaderLeft
  },
  data () {
    return {
      txt1: '',
      txt2: '',
      className: '',
      rightPath: [
        '/settleIn/preSettleIn/', '/settleIn/preSettleIn/'
      ],
      showArea: 1,
      progressList: [
        {
          title: '创建账号',
          detail: '创建企业超级管理员账号'
        },
        {
          title: '企业认证',
          detail: '填写名称，地址，联系人等 基本信息'
        },
        {
          title: '平台审核',
          detail: '平台统一审核资料信息'
        },
        {
          title: '正式入驻',
          detail: '审核通过后正式入驻平台'
        }
      ]
    }
  },
  mounted () {
    let path = this.$route.path;
    this.setShowArea(path);
    this.setUrl()
  },
  computed: {
    path () {
      return this.$route.path;
    }
  },
  watch: {
    $route (newVal) {
      this.setShowArea(newVal.path);
    }
  },
  methods: {
    setShowArea (path) {
      let rightPath = this.rightPath;
      let isRight = false;
      for (let item of rightPath) {
        if (path.indexOf(item) !== -1) {
          this.showArea = 1;
          isRight = true;
        }
      }
      if (!isRight) this.showArea = 2;
    },
    setUrl () {
      let pathList = this.path.split('/');
      let type = pathList[pathList.length - 1];
      switch (type) {
        case 'supplier':
          this.txt1 = '海量优质客户资源 竞价环境公开透明';
          this.txt2 = '人工智能算法推荐 · 驱动营收稳步增长';
          this.className = 'banner-su';
          break;
        case '4sShop':
          this.txt1 = '海量优质供应商资源 打造线上营销通道'
          this.txt2 = '提升数字化采购能力和业务经营能力'
          this.className = '';
          break;
        case '2sShop':
          this.txt1 = '直通原厂 / 品牌厂商采购渠道'
          this.txt2 = '星级认证 · 机构授牌 · 维修技能 · 送修线索赋能'
          this.className = 'banner-2s';
          break;
      }
    },
    immediatelySettleIn () {
      let pathList = this.path.split('/');
      let type = pathList[pathList.length - 1];
      switch (type) {
        case 'supplier':
          this.$store.commit('settleIn/changeCurrentType', 3);
          break;
        case '4sShop':
          this.$store.commit('settleIn/changeCurrentType', 2);
          break;
        case '2sShop':
          this.$store.commit('settleIn/changeCurrentType', 1);
          break;
        default:
          console.error('路由引入错误');
          break;
      }
      this.$router.push('/enter/enterView/establishID');
    }
  }
}
</script>

<style lang="less" scoped>
.settle-in-main {

  /deep/ .honexun-header {
    background: #fff;
  }

  .settle-in-banner {
    height: 526px;
    .mainViewAreaStyle();
    position: relative;
    margin-bottom: 327px;

    .settle-in-banner-background {
      width: 2560px;
      height: 526px;
      background: url("./../../../assets/image/settleIn/ban.png") center
        no-repeat;
      background-size: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: -(2560px - @mainViewAreaWidth) / 2;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      &.banner-2s {
        background: url("./../../../assets/image/settleIn/ban-2s.png") center
        no-repeat;
      }

      &.banner-su {
        background: url("./../../../assets/image/settleIn/ban-su.png") center
        no-repeat;
      }

      .background-box {
        width: 1192px;
        margin: 106px auto 129px;
        .banner-title {
          font-size: 46px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #ffffff;
          line-height: 65px;
          padding-bottom: 23px;
        }
        .banner-title1 {
          font-size: 30px;
          font-family: PingFangSC, PingFangSC-Light;
          font-weight: 300;
          text-align: left;
          color: #fffcb2;
          line-height: 42px;
          padding-bottom: 39px;
        }
        .banner-options {
          width: 190px;
          height: 60px;
          border-radius: 2px;
          background: @activeRed;
          line-height: 60px;
          text-align: center;
          font-size: 20px;
          color: #fff;
          cursor: pointer;
          .userUnSelect();
        }
      }
    }

    .banner-content {
      .mainViewAreaStyle();
      height: 288px;
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
      position: absolute;
      top: 465px;
      left: 0;
      right: 0;

      .banner-content-title {
        padding: 24px 0;
        font-size: 24px;
        line-height: 36px;
        text-align: center;
        color: @colorCommonFont;
      }

      .progress-content {
        overflow: hidden;
        .flex(flex-start, flex-start);

        .each-progress {
          width: 278px;
          height: 180px;
          background: @greyBackground;
          margin: 0 0 0 16px;
          .flex(flex-start, flex-start);

          .left-index {
            display: inline-block;
            width: 72px;
            height: 72px;
            margin: 48px 0 0 12px;
            line-height: 70px;
            text-align: center;
            font-size: 36px;
            font-weight: 500;
            color: @activeRed;
            font-family: PingFangSC, PingFangSC-Medium;
            background: url("./../../../assets/image/settleIn/banner-progress-num.png")
              center no-repeat;
            background-size: 100%;
          }

          .right-content {
            display: inline-block;
            width: 180px;

            .right-title {
              padding-top: 62px;
              font-size: 16px;
              line-height: 16px;
              color: @colorCommonFont;
              font-weight: 500;
              margin-bottom: 12px;
            }

            .right-detail {
              font-size: 12px;
              line-height: 18px;
              color: @colorGreyFont;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
  .footer {
    width: 1920px;
    height: 100px;
    background: url("./../../../assets/image/settleIn/ban1.png") center
      no-repeat;
    background-size: 100%;
  }
}
</style>
